<template>
    <view class="charging">
        <view class="img"></view>
        <view class="msg">
            <view class="title">
                <view class="title1">{{ powerOneData.powerplanName }}</view>
                <view class="time">
                    <text>{{ powerOneData.poweerplantScore }}分</text>
                    <text>|</text>
                    <text>最近充电一小时前</text>
                </view>
                <view class="park">
                    <view class="left">
                        <text>对外开放</text>
                        <text>停车收费</text>
                        <text>互联互通</text>
                    </view>
                    <view class="rigth">
                        <text>￥{{ powerOneData.stationPrice }}</text>
                        <text>元/度</text>
                    </view>
                </view>
                <view class="address">
                    <text>{{ powerOneData.powerplantAddress }}</text>
                </view>
            </view>
        </view>
        <view class="terminal">
            <view class="header">
                <text @click="terminal" :class="current == 0 ? 'active' : ''">终端</text>
                <text @click="comment" :class="current == 1 ? 'active' : ''">评论</text>
            </view>
            <swiper :interval="100" :current="current">
                <swiper-item>
                    <view class="swiper-item">
                        <view class="film">
                            <text>直流电4/6</text>
                            <text>交流电2/10</text>
                        </view>
                        <view class="setiao">
                            <image src="../../../static/charging/lansetiao@2x.png" mode=""></image>
                            <image src="../../../static/charging/lansetiao@2x.png" mode=""></image>
                            <image src="../../../static/charging/lansetiao@2x.png" mode=""></image>
                            <image src="../../../static/charging/huisetiao@2x.png" mode=""></image>
                            <image src="../../../static/charging/huisetiao@2x.png" mode=""></image>
                            <image src="../../../static/charging/huisetiao@2x.png" mode=""></image>
                            <image src="../../../static/charging/huisetiao@2x.png" mode=""></image>
                            <image src="../../../static/charging/huisetiao@2x.png" mode=""></image>
                            <image src="../../../static/charging/huisetiao@2x.png" mode=""></image>
                            <image src="../../../static/charging/huisetiao@2x.png" mode=""></image>
                        </view>
                        <view class="list-screen">
                            <view class="zuo">
                                <view>空闲优先</view>
                                <view>已插枪</view>
                            </view>
                            <view class="you">
                                <text>筛选</text>
                                <image src="https://z3.ax1x.com/2021/04/07/cGFhnA.png" mode=""></image>
                            </view>
                        </view>
                        <view v-for="item in bridge" :key="index">
                            <navigator url="../terminal/terminal">
                                <view class="list">
                                    <view class="img-text">
                                        <view><image :src="item.stationImage" mode=""></image></view>
                                        <view>剩余0小时15分钟</view>
                                    </view>
                                    
                                    <view class="introduce-text">
                                        <view>{{ item.stationName }}（101020203030）</view>
                                        <view>车位号：{{ item.stationBrand }}</view>
                                        <view>{{ item.stationMinimumPower }}kW-{{ item.stationMaximumPower }}kW(近期最大120kW)</view>
                                        <view>250V-750V(12V)</view>
                                        <view>
                                            <text>直流快充</text>
                                            <text>|</text>
                                            <text>国标2011</text>
                                            <text>|</text>
                                            <text>国标2015</text>
                                        </view>
                                    </view>
                                </view>
                            </navigator>
                        </view>

                        <view class="scan"><image src="https://z3.ax1x.com/2021/04/08/cJdYJx.png" mode=""></image></view>
                    </view>
                </swiper-item>
                <swiper-item><view class="swiper-item">456</view></swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
const { mapState, mapMutations, mapActions } = createNamespacedHelpers('map');
export default {
    data() {
        return {
            current: '0'
        };
    },
    methods: {
        terminal() {
            this.current = 0;
        },
        comment() {
            this.current = 1;
        },
        ...mapActions(['getByIdBridge'])
    },
    computed: {
        ...mapState(['bridge', 'powerOneData'])
    },
    onLoad(option) {
        this.getByIdBridge(option.markerId);
    }
};
</script>

<style lang="scss" scoped>
.charging {
    background-color: #f9f9f9;
    height: 100%;
    .img {
        height: 556rpx;
        background: url('https://z3.ax1x.com/2021/04/07/c8sUWq.png') center no-repeat;
        background-size: 100vw;
        z-index: -1;
    }
    .msg {
        padding: 0rpx 24rpx;
        .title {
            // width: 351px;
            height: 250rpx;
            background-color: #ffffff;
            margin-top: -100rpx;
            border-radius: 24rpx;
            padding: 20rpx;
            .title1 {
                font-size: 32rpx;
                color: #333333;
                font-weight: 600;
            }
            .time {
                margin-top: 24rpx;
                font-size: 18rpx;
                color: #999999;
                text:nth-child(1) {
                    color: #ff5300;
                }
                text:nth-child(2) {
                    margin-left: 10rpx;
                    margin-right: 10rpx;
                }
            }
            .park {
                display: flex;
                justify-content: space-between;
                margin-top: 8rpx;
                // margin-bottom: 12rpx;
                .left {
                    font-size: 18rpx;
                    color: #999999;
                    text:nth-child(2) {
                        margin-left: 20rpx;
                        margin-right: 20rpx;
                    }
                }
                .rigth {
                    text:nth-child(1) {
                        color: #ff5300;
                        font-size: 40rpx;
                    }
                    text:nth-child(2) {
                        font-size: 20rpx;
                        color: #333333;
                    }
                }
            }
            .address {
                width: 100%;
                height: 80rpx;
                background-color: #f8f8f8;
                border-radius: 16rpx;
                text {
                    line-height: 80rpx;
                    color: #999999;
                    font-size: 24rpx;
                    margin-left: 20rpx;
                }
            }
        }
    }
    .terminal {
        padding: 0rpx 25rpx;
        margin-top: 60rpx;
        .header {
            text {
                display: inline-block;
                width: 70rpx;
                height: 60rpx;
                font-size: 32rpx;
                color: #999999;
                margin-bottom: 24rpx;
            }
            text:nth-child(1) {
                margin-right: 40rpx;
            }
            .active {
                color: #ff5802;
                border-bottom: 6rpx solid #ff5802;
                font-weight: 600;
            }
        }
        swiper {
            height: 100vh;
            .swiper-item {
                position: relative;
                .film {
                    display: flex;
                    justify-content: space-around;
                    font-size: 24rpx;
                    text:nth-child(1) {
                        color: #ff5300;
                    }
                    text:nth-child(2) {
                        color: #999999;
                    }
                }
                .setiao {
                    margin-bottom: 40rpx;
                    image {
                        width: 62rpx;
                        height: 8rpx;
                        margin-right: 8rpx;
                    }
                }
                .list-screen {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 40rpx;
                    .zuo {
                        display: flex;
                        view {
                            border-radius: 20rpx;
                            background-color: #e1f3ff;
                            color: #20a8fc;
                            font-size: 22rpx;
                            text-align: center;
                            line-height: 50rpx;
                        }
                        view:nth-child(1) {
                            margin-right: 24rpx;
                            width: 120rpx;
                            height: 50rpx;
                        }
                        view:nth-child(2) {
                            width: 100rpx;
                            height: 50rpx;
                        }
                    }
                    .you {
                        display: flex;
                        align-items: center;
                        text {
                            font-size: 28rpx;
                            color: #20a8fc;
                        }
                        image {
                            width: 20rpx;
                            height: 20rpx;
                        }
                    }
                }
                .list {
                    border-top: 1rpx solid #cccccc;
                    border-bottom: 1rpx solid #cccccc;
                    width: 100%;
                    // height: 294rpx;
                    padding: 40rpx 0rpx;
                    display: flex;
                    .img-text {
                        width: 180rpx;
                        height: 250rpx;
                        display: flex;
                        justify-content: center;
                        flex-wrap: wrap;
                        border-right: 1px solid #cccccc;
                        view:nth-child(1) {
                            width: 126rpx;
                            image {
                                width: 126rpx;
                                height: 126rpx;
                            }
                        }
                        view:nth-child(2) {
                            margin-top: -50rpx;
                            width: 160rpx;
                            height: 30rpx;
                            text-align: center;
                            font-size: 18rpx;
                            background-color: #ffffff;
                            border-radius: 20rpx;
                            color: #cccccc;
                        }
                    }
                    .introduce-text {
                        margin-left: 24rpx;
                        view:nth-child(1) {
                            font-size: 32rpx;
                            color: #333333;
                            margin-bottom: 24rpx;
                        }
                        view:nth-child(2) {
                            width: 150rpx;
                            height: 40rpx;
                            text-align: center;
                            line-height: 40rpx;
                            background-color: #e1f3ff;
                            border-radius: 20rpx;
                            font-size: 22rpx;
                            color: #20a8fc;
                            margin-bottom: 24rpx;
                        }
                        view:nth-child(3) {
                            font-size: 20rpx;
                            color: #999999;
                            margin-bottom: 16rpx;
                        }
                        view:nth-child(4) {
                            font-size: 20rpx;
                            color: #999999;
                            margin-bottom: 24rpx;
                        }
                        view:nth-child(5) {
                            font-size: 20rpx;
                            color: #999999;
                            text {
                                margin-right: 8rpx;
                            }
                        }
                    }
                }
                .scan {
                    width: 90rpx;
                    height: 90rpx;
                    position: absolute;
                    top: 300rpx;
                    right: 0rpx;
                    image {
                        width: 84rpx;
                        height: 84rpx;
                    }
                }
            }
        }
    }
}
</style>
